<template>
	<view>
		<image class="topbg" mode="scaleToFill" src="../../static/img/login_bg.png"></image>

		<view class="content">
			<view class="status_bar"></view>
			<view class="content2">
				<image class="chacha" @click="close" mode="scaleToFill" src="../../static/img/ic_chacha.png"></image>

				<view class="logo-view">
					<image class="applogo" mode="scaleToFill" src="../../static/img/logo_min.png"></image>
				</view>


				<u-field class="input-view" type="number" icon="phone" v-model="phoneValue" label-width="0"
					maxlength="11" placeholder="请输入手机号">
				</u-field>

				<u-field class="input-view" type="text" icon="lock" v-model="passwordValue" label-width="0" password
					maxlength="16" placeholder="请输入密码"></u-field>

				<view class="wangji-view" v-if="false">
					<text class="wangji-text" @click="startFindpwd">忘记密码</text>
				</view>

				<button class="login-btn" type="primary" ripple @click="startLogin">登录/注册</button>
			</view>
			<text class="bottom-text">{{bottomText}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phoneValue: '',
				passwordValue: '',
				bottomText: 'SamWarrior2021全栈毕业项目'
			}
		},
		methods: {
			close() {
				uni.navigateBack({

				})
			},
			startLogin() {
				if (this.phoneValue.length < 11 || this.passwordValue.length<6) {
					uni.showToast({
						title: '请输入手机号和6位以上密码',
						duration: 2000,
						icon: 'none',
						position: 'bottom'
					});
				} else {
					this.requestLogin(this.phoneValue, this.$w_md5.hex_md5_32(this.passwordValue))
				}
			},
			startFindpwd() {
				uni.navigateTo({
					url: "../findpwd/findpwd"
				})
			},
			requestLogin(username, password) {
				this.$u.post('/client/user/login', {
					username: username,
					password: password
				}).then(res => {
					if (res.code == 200) {
						// console.log(res.token)
						uni.setStorageSync('token', res.token)
						uni.navigateBack()
					} else {
						uni.showToast({
							title: res.msg,
							duration: 2000,
							icon: 'none',
							position: 'bottom'
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $uni-bg-color;
	}

	.topbg {
		position: absolute;
		width: 100%;
		height: 300rpx;
		z-index: 0;
	}

	.bottom-text {
		font-size: 13px;
		width: 100%;
		position: absolute;
		bottom: 80rpx;
		text-align: center;
		color: $uni-text-color-grey;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 100;

		.content2 {
			display: flex;
			width: 100%;
			padding: 60rpx 35rpx 35rpx 35rpx;
			flex-direction: column;

			.chacha {
				width: 55rpx;
				height: 55rpx;
				padding: 5rpx;
			}

			.logo-view {
				display: flex;
				margin-top: 25rpx;
				flex-direction: column;
				align-items: center;

				.applogo {
					width: 154rpx;
					height: 154rpx;
					border-radius: 77rpx;
					box-shadow: 0px 0px 10px #dedede;
					margin-bottom: 50rpx;
				}
			}


			.input-view {
				margin: 20rpx 50rpx 0 50rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				height: 100rpx;
			}

			.wangji-view {
				display: flex;
				flex-direction: row-reverse;
				margin: 20rpx 50rpx 0 50rpx;

				.wangji-text {
					font-size: 15px;
					color: $uni-text-color;
				}
			}

			.login-btn {
				margin: 70rpx 50rpx 0 50rpx;
				font-size: 17px;
			}
		}

	}
</style>
